<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人注册</title>
    <link rel="icon" href="./images/src=http___pic1.zhimg.com_v2-896450e686794a4e118e444f64aaeeaf_1440w.jpg_source=172ae18b&refer=http___pic1.zhimg.jpg">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/register.css">
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" target="_blank">电商网站</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="seckill.html">商城专区</a></li>
            <li class="active"><a href="javascript:void(0);">个人注册 <span class="sr-only">(current)</span></a></li>
            <li><a href="login.html">账户登录</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-4">
            <form method="post" action="#">
                <div class="form-group">
                  <label for="username">用户名</label>
                  <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>
                    <p >密码强度:</p>
                    <table  width="107" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
                    height="23" style="color: black;margin: 0 0 0 24%;">
                  <tr align="center" bgcolor="#eeeeee">
                  <td width="33%" id="strength_L">弱</td>
                  <td width="33%" id="strength_M">中</td>
                  <td width="33%" id="strength_H">强</td>
                  </tr>
                  </table>
                </div>
                <div class="form-group">
                    <label for="password-confirm">确认密码</label>
                    <input type="password" class="form-control" id="password-confirm" placeholder="请确认密码">
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-block btn-primary" id="btn-register">立即注册</button>    
                </div>
              </form>              
          </div>
          <div class="col-sm-4"></div>
      </div>
    </div>

    <script src="./bootstrap/js/jquery-3.5.1.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/register.js"></script>


    <script language=javascript>
      //CharMode函数
      //测试某个字符是属于哪一类.
      function CharMode(iN){
      if (iN>=48 && iN <=57) //数字
      return 1;
      if (iN>=65 && iN <=90) //大写字母
      return 2;
      if (iN>=97 && iN <=122) //小写
      return 4;
      else
      return 8; //特殊字符
      }
      //bitTotal函数
      //计算出当前密码当中一共有多少种模式
      function bitTotal(num){
      modes=0;
      for (i=0;i<4;i++){
      if (num & 1) modes++;
      num>>>=1;
      }
      return modes;
      }
      //checkStrong函数
      //返回密码的强度级别
      function checkStrong(sPW){
      if (sPW.length<=4)
      return 0; //密码太短
      Modes=0;
      for (i=0;i<sPW.length;i++){
      //测试每一个字符的类别并统计一共有多少种模式.
      Modes|=CharMode(sPW.charCodeAt(i));
      }
      return bitTotal(Modes);
      }
      //pwStrength函数
      //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
      function pwStrength(pwd){
      O_color="#eeeeee";
      L_color="#FF0000";
      M_color="#FF9900";
      H_color="#33CC00";
      if (pwd==null||pwd==''){
      Lcolor=Mcolor=Hcolor=O_color;
      }
      else{
      S_level=checkStrong(pwd);
      switch(S_level) {
      case 0:
      Lcolor=Mcolor=Hcolor=O_color;
      case 1:
      Lcolor=L_color;
      Mcolor=Hcolor=O_color;
      break;
      case 2:
      Lcolor=Mcolor=M_color;
      Hcolor=O_color;
      break;
      default:
      Lcolor=Mcolor=Hcolor=H_color;
      }
      }
      document.getElementById("strength_L").style.background=Lcolor;
      document.getElementById("strength_M").style.background=Mcolor;
      document.getElementById("strength_H").style.background=Hcolor;
      return;
      }
      </script>
  </body>
</html>